/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import {RepLink} from "../../common/base";
import {DirectLink} from "../../../routing/Link";

/**奇怪的目录：
 * 非承压报告那种的。
 * 【优点】比<Table />的布局： #可以极大压缩每一行的 高度px数。这里行高仅仅有21px。
 * */
export const CatalogVw= ({orc, rep,children,}: { orc: any, rep: any, children?: any}
) => {
    const theme = useTheme();
    return <>
        <div id='ProjectList' css={{"@media print": {pageBreakBefore: 'always',},}}>
            <RepLink rep={rep} tag={'ProjectList'}>
                <Text variant="h2" css={{textAlign: 'center',letterSpacing:'2rem', "@media print": {marginTop: '8rem', marginBottom: '5rem'},
                }}>目录</Text>
            </RepLink>
        </div>
        <div css={{"@media print": {maxHeight: `20rem`, display: 'flex', flexDirection: 'column', justifyContent: 'center',},}}>
            <div css={{display: 'flex', justifyContent: 'flex-end',}}>
                <Text css={{[theme.mediaQueries.md]: {marginRight: '2rem',}}}>
                </Text>
            </div>
            {orc?.Projects?.map((prj: any, i: number) => {
                if(prj?.na || prj?.om)   return null;
                if(prj?.zs || prj?.dd) return null;
                return prj?.do && (
                    <DirectLink key={i}
                                href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList?from=${i}#ProjectList`}>
                        <div css={{
                            display: 'flex', alignItems: 'center', margin: 'auto', width: '100%',
                            [theme.mediaQueries.md]: {width: '90%',},
                            "@media print": {marginTop: '1rem',},
                        }}>
                            <div css={{minWidth: 0, wordWrap: 'break-word', boxSizing: 'border-box', maxWidth: `calc(100% - 6rem)`}}>
                                {prj?.ml ? prj?.ml : prj?.name}
                            </div>
                            <hr css={{flex: 1, minWidth: '1rem', boxSizing: 'border-box', border: 'none', borderTop: '1px dashed #000', margin: '10px 0'}}/>
                            <div css={{width: '5rem', marginLeft: 'auto', boxSizing: 'border-box'}}>
                             第 {prj?.page} 页
                            </div>
                        </div>
                    </DirectLink>
                );
            })}
            {!(orc?.Projects?.length > 0) &&
                <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                    <Text variant="h2" css={{
                        textAlign: 'center',
                    }}>还未初始化！<br/>空目录表</Text>
                </DirectLink>
            }
        </div>
    </>;
};

/*css自带的变量
import { css, Global, styled } from '@emotion/react';
const globalStyles = css`
:root {
--div3-width: 200px;
}
`;
const Div3 = styled.div`
width: var(--div3-width);         //width: var(--div3-width, 200px);  calc(100% - var(--div3-width));
`;
const MyComponent: React.FC = () => {
return ( <>
    <Global styles={globalStyles} />
    <Div3>固</Div3>
</> );
点状线  <div css={{ flex: 1,
            minWidth: '1rem',
            boxSizing: 'border-box',
            borderBottom: '1px dashed #000',
            paddingBottom: '5px',
            marginBottom: '10px'
        }} />
2点状线  .dotted-bg {
    height: 10px;
    background: repeating-linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 4px);
    margin: 10px 0;
}
* */
